<template>
  <div v-if="isAdmin">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
        <el-breadcrumb-item :to="{ path:'/blank' }"><i class="el-icon-coin"></i>考试统计</el-breadcrumb-item>
        <el-breadcrumb-item>统计总揽</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
    <div class="container">
      <el-row >
        <el-col :span="16">
          <el-row class="c1" >
            <el-col :span="12">
              <div ref="chart1" style="width: 460px;height: 320px;"></div>
            </el-col>
            <el-col :span="12" align="middle">
              <div>
                <h1 style="margin: 20px 0 -40px 0">总人数</h1>
                <div ref="chart4" style="width: 320px;height: 320px"></div>
              </div>
            </el-col>
          </el-row>
          <el-row class="c2" style="border: 2px solid orange;margin: -20px 10px 0 0">
            <el-col class="c3" :span="7">
              <div ref="chart2" style="width: 280px;height: 240px;margin-top: 60px"></div>
            </el-col>
            <el-col class="c4" :span="17" align="middle">
              <div>
                <h1 style="margin: 10px 0">优秀学生排名(随机)</h1>
                <el-table :data="majorHighScoresData" border style="margin: 20px 10px;width: 660px">
                  <el-table-column label="排名" show-overflow-tooltip width="60" align="center">
                    <template slot-scope="scope">
                      <span>{{scope.$index + 1}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="trueName" label="名字" show-overflow-tooltip width="100" align="center"></el-table-column>
                  <el-table-column prop="majorName" label="专业" show-overflow-tooltip width="100" align="center"></el-table-column>
                  <el-table-column prop="className" label="班级" show-overflow-tooltip width="100" align="center"></el-table-column>
                  <el-table-column prop="totalScore" label="分数" show-overflow-tooltip width="60" align="center"></el-table-column>
                  <el-table-column prop="examName" label="考试名称" show-overflow-tooltip align="center"></el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="c5" :span="8" style="border: 2px solid orange;;height: 688px" align="middle">
          <el-row class="c6" style="margin: 0">
            <div ref="chart3" style="width: 480px;height: 240px;margin: 80px 10px"></div>
          </el-row>
          <el-row class="c7" style="margin: -80px 0 0 0">
            <h1>班级成绩情况</h1>
            <div style="margin-top: 20px">
              <el-popover v-for="(item,index)  in majorData" :key="index " :content=item.name  trigger="hover">
                <el-button slot="reference" type="success" style="margin: 10px" @click="handleMajorClick(item.name,className)">{{item .name}}</el-button>
              </el-popover>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="c8" v-if="allCountClass">
      <div>
        <h1 style="color: white;margin: 20px 0">{{majorName}}<i class="el-icon-close" style="float: right;margin-right: -66px;font-size: 30px;cursor: pointer" @click="allCountClass=false"></i></h1>
        <span v-for="(item,index) in allMajorClass" :key="index" style="color: #ff9966;cursor: pointer;margin: 0 10px" @click="handleMajorClick(majorName,item.className)">{{item.className}}</span>
        <el-table :data="classHighScoresData" border style="margin: 20px 10px;width: 660px;opacity: 0.5;border-radius: 5px;color: black">
          <el-table-column label="排名" show-overflow-tooltip width="60" align="center">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="trueName" label="名字" show-overflow-tooltip width="100" align="center"></el-table-column>
          <el-table-column prop="majorName" label="专业" show-overflow-tooltip width="100" align="center"></el-table-column>
          <el-table-column prop="className" label="班级" show-overflow-tooltip width="100" align="center"></el-table-column>
          <el-table-column prop="totalScore" label="分数" show-overflow-tooltip width="60" align="center"></el-table-column>
          <el-table-column prop="examName" label="考试名称" show-overflow-tooltip align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
//1.引入
let Echarts1 = require('echarts/lib/echarts');
require('echarts/lib/chart/pie');
let Echarts2 = require('echarts/lib/echarts');
require('echarts/lib/chart/pie');
let Echarts3 = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
let Echarts4 = require('echarts/lib/echarts');
require('echarts/lib/chart/pie');

export default {
  data() {
    return {
      isAdmin:true,
      allCountClass:false,
      //当前用户上下文
      localUser:{},
      //定义可视化
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      //存储统计
      allMajor:[],
      majorData:[],
      allClass:[],
      classData:[],
      classDataName:[],
      allUser:[],
      allPass:[],
      majorPassData:[],
      //随机五名最高排名的学生
      majorHighScoresData:[],
      classHighScoresData:[],
      //用来记录专业和班级
      majorClassData:[],
      allMajorClass:[],
      majorName:'',
      className:'',

    }
  },
  methods: {
    majorClass(majorName){
      let url = 'http://localhost:9284/major/majorClass?majorName='+majorName;
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({
        'headers': {
          'Authorization': localJwt
        }
      }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.allMajorClass = jsonResult.data;
          console.log(this.allMajorClass)
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //查询每个班级最高分
    handleMajorClick(majorName,className){
      this.majorName=majorName;
      this.majorClass(majorName);
      let url = 'http://localhost:9284/major/classHighScores?majorName='+majorName+'&className='+className;
      console.log(url)
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({
        'headers': {
          'Authorization': localJwt
        }
      }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.classHighScoresData = jsonResult.data;
          if(this.classHighScoresData.length==0){
            if (className==""){
              this.$message({
                message: '当前'+majorName+'暂无人参加考试',
                type: 'warning',
              });
              return;
            }else {
              this.$message({
                message: '当前'+className+'暂无人参加考试',
                type: 'warning',
              });
              return;
            }

          }
          this.allCountClass=true
          console.log(this.classHighScoresData)
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
      console.log(name)
    },
    //查询优秀学生排名
    majorHighScores(){
      let url = 'http://localhost:9284/major/majorHighScores';
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({
        'headers': {
          'Authorization': localJwt
        }
      }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.majorHighScoresData = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //查询及格人数
    majorPass(){
      let url = 'http://localhost:9284/major/majorPass';
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({
        'headers': {
          'Authorization': localJwt
        }
      }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.allPass = jsonResult.data;
          let count = 0;
          let passCount = 0;
          for (let i = 0; i < this.allPass.length; i++) {
            if (this.allPass[i].count!=null){
              passCount = this.allPass[i].count;
            }
            if (this.allPass[i].userCount!=null){
              count = this.allPass[i].userCount;
            }
          }
          let numCount = count - passCount;
          this.majorPassData.push({
            value: numCount,
            name:'不及格',
            color:'#ff0'
          },{
            value: passCount,
            name:'及格',
            color:'#ff0'
          })
          this.initCharts2(count);
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //查询用户人数
    userCountList(){
      let url = 'http://localhost:9284/major/listUser';
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({
        'headers': {
          'Authorization': localJwt
        }
      }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.allUser = jsonResult.data;
          let userCount = '';
          let teacherCount = '';
          for (let i = 0; i < this.allUser.length; i++) {
            if (this.allUser[i].userCount!=null){
              userCount = this.allUser[i].userCount;
            }
            if (this.allUser[i].teacherCount!=null){
              teacherCount = this.allUser[i].teacherCount;
            }
          }
          this.initCharts4(userCount,teacherCount)
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //查询班级人数
    classCountList(){
      let url = 'http://localhost:9284/major/listClass';
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({
        'headers': {
          'Authorization': localJwt
        }
      }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.allClass = jsonResult.data;
          for (let i = 0; i < this.allClass.length; i++) {
            this.classData.push({
              value:this.allClass[i].classCount,
              name:this.allClass[i].classMajor,
              name1:this.allClass[i].className
            })
            this.classDataName.push(this.allClass[i].className)
          }
          this.initCharts3();
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //查询专业人数
    majorCountList(){
      let url = 'http://localhost:9284/major/listMajor';
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({
        'headers': {
          'Authorization': localJwt
        }
      }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.allMajor = jsonResult.data;
          for (let i = 0; i < this.allMajor.length; i++) {
            this.majorData.push({
              value:this.allMajor[i].majorCount,
              name:this.allMajor[i].majorName
            })
          }
          this.initCharts1();
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //可视化图形
    initCharts1() {
      //2.初始化
      this.chart1 = Echarts1.init(this.$refs.chart1);
      //3.配置数据
      let option = {
        title: {text: '统计：专业人数', left: 'center'},
        legend: {orient: 'vertical', left: 'left'},
        tooltip: {trigger: 'item', borderColor: '#ff0',formatter: '{a} <br/>{b} : {c} ({d}%)'},
        series: [{data: this.majorData, type: 'pie',name:'人数', radius: '50%'}],
        emphasis: {itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
      };
      //4.传入数据
      this.chart1.setOption(option);
    },
    initCharts2(count) {
      //2.初始化
      this.chart2 = Echarts2.init(this.$refs.chart2);
      //3.配置数据
      let option = {
        title: {text: '统计：学生及格情况',subtext: '总参加考试人数：'+count, left: 'center'},
        tooltip: {trigger: 'item', borderColor: '#ff0',formatter: '{b} : <br/> {c} ({d}%)'},
        series: [{data: this.majorPassData, type: 'pie', radius: '50%',color: ['#f00', '#0f0'],}],
        emphasis: {itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
      };
      //4.传入数据
      this.chart2.setOption(option);
    },
    initCharts3() {
      //2.初始化
      this.chart3 = Echarts3.init(this.$refs.chart3);
      //3.配置数据
      let option = {
        title: {text: '统计：班级人数', left: 'center'},
        xAxis: { type: 'category', data: this.classDataName},
        yAxis: {type: 'value'},
        tooltip: {trigger: 'item', borderColor: '#ff0',formatter: function(params) {
            return '人数：' + params.value + '<br/>' +'班级：' + params.data.name1 +'<br/>' + '专业：' + params.name + '<br/>' ;
          }},
        series: [{data: this.classData, type: 'bar'}],
        emphasis: {itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
      };
      //4.传入数据
      this.chart3.setOption(option);
    },
    initCharts4(userCount,teacherCount) {
      //2.初始化
      this.chart4 = Echarts4.init(this.$refs.chart4);
      //3.配置数据
      let option = {
        title: {text: userCount, textStyle: {color: '#01c4a3', fontSize: 40},
          subtext: '老师人数：'+teacherCount,
          subtextStyle: {color: '#909090',}, itemGap: -10, left: 'center', top: 'center'},
        angleAxis: {max: 100, clockwise: false, axisLine: {show: false},
          axisTick: {show: false}, axisLabel: {show: false}, splitLine: {show: false}},
        radiusAxis: {type: 'category', axisLine: {show: false}, axisTick: {show: false},
          axisLabel: {show: false}, splitLine: {show: false}},
        polar: {center: ['50%', '50%'], radius: '140%'},
        tooltip: {trigger: 'item'},
        series: [{data: [{value: userCount}], type: 'pie',name:'总人数', radius: ['48%', '52%'],labelLine: {show: false},}],
        color: ['rgb(40, 236, 236)']
      };
      //4.传入数据
      this.chart4.setOption(option);
    },
  },
  mounted() {
    this.localUser = JSON.parse(localStorage.getItem("localUser"));
    if (this.localUser.roleId==4){
      this.isAdmin = false;
      this.$alert('您当前权限不足，统计总揽需要更高的权限', '错误', {
        confirmButtonText: '确定',
        callback: action => {
        }
      });
      return;
    }

    this.majorCountList();
    this.userCountList();
    this.classCountList();
    this.majorPass();
    this.majorHighScores();
  },
}
</script>

<style scoped>
/*弹性盒*/
.container {
  display: flex;
  flex-wrap: wrap; /*换行显示*/
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
}

.c8{
  width: 880px;
  height: 460px;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #0094FF;
  border-radius: 10px;
  background-image: radial-gradient(#1A2D5E 5%, #000337 70%);
  display: flex;
  position: fixed;
  justify-content: center;
  animation: dh1 2s;
  -webkit-animation: dh1 2s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
  z-index: 5;
}

.c1{
  border-radius: 10px;
  animation: dh3 2s;
  -webkit-animation: dh3 2s;
  animation-delay: 1s;
  animation-fill-mode: both;
}
.c2{
  position: relative;
  animation: dh4 2s;
  -webkit-animation: dh4 2s;
  animation-delay: 3s;
  animation-fill-mode: both;
}
.c3{
  position: relative;
  animation: dh4 2s;
  -webkit-animation: dh4 2s;
  animation-delay: 4s;
  animation-fill-mode: both;
}

.c4{
  animation: dh4 2s;
  -webkit-animation: dh4 2s;
  animation-delay: 6s;
  animation-fill-mode: both;
}

.c5{
  animation: dh4 2s;
  -webkit-animation: dh4 2s;
  animation-delay: 6s;
  animation-fill-mode: both;
}

.c6{
  animation: dh4 2s;
  -webkit-animation: dh4 2s;
  animation-delay: 8s;
  animation-fill-mode: both;
}

.c7{
  animation: dh4 2s;
  -webkit-animation: dh4 2s;
  animation-delay: 10s;
  animation-fill-mode: both;
}

@keyframes dh1{
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes dh2{
  from {opacity: 0; position: relative;top: 100px;}
  to {opacity: 1; position: relative; top: 0;}
}

@keyframes dh3{
  from {opacity: 0; position: relative;left: 500px;}
  to {opacity: 1; position: relative; left: 0;}
}

@keyframes dh4 {
  from {opacity: 0;transform: scale(0, 0);}
  to {opacity: 1;transform: scale(1, 1);}
}

</style>
